<template>
  <van-cell-group v-for="item in lists" :key="item">
    <van-cell
      center
      :icon="item.img"
      :title="item.title"
      :value="item.value"
      :label="item.label"
    />
  </van-cell-group>
</template>

<script setup>
const lists = [
  {
    img: "/images/avatar4.png",
    title: "消息号内容",
    value: "9月17日",
    label: "至本旗舰店：秋月皎洁，共叙美满！正逢中秋团圆之际，至本愿您和家人欢喜赏月，诸事如愿！",
  },
  {
    img: "/images/avatar1.png",
    title: "欧莱雅旗舰店",
    value: "9月14日",
    label: "【巴黎欧莱雅】~小欧预祝您中秋快乐，阖家幸福安康！进店可选中秋美礼>s.tb.cn/y6.ZhevaZ拒收请回复R",
  },
  {
    img: "/images/avatar2.png",
    title: "OLAY旗舰店",
    value: "9月12日",
    label: "【OLAY官方旗舰店】宠粉会员日限时开抢！",
  },
  {
    img: "/images/avatar3.png",
    title: "订阅号消息",
    value: "9月10日",
    label: "彩棠旗舰店：【新品上市————小圆管粉底液、三色遮瑕膏】",
  },
  {
    img: "/images/avatar5.png",
    title: "周六福旗舰店",
    value: "9月5日",
    label: "您有一条店铺消息",
  },
  {
    img: "/images/avatar6.jpg",
    title: "雅思兰黛旗舰店",
    value: "9月4日",
    label: "【雅思兰黛官方旗舰店】全新<大棕罐>封愈膜霜重磅上市，即刻锁定 开启抗老新篇章！",
  },
  {
    img: "/images/avatar7.jpg",
    title: "COGI高资旗舰店",
    value: "9月3日",
    label: "【高资旗舰店】直播宠粉日送福利！",
  },
  {
    img: "/images/avatar8.webp",
    title: "YSL旗舰店",
    value: "9月2日",
    label: "【YSL官方旗舰店】新品上市，等你来抢购！",
  },
  {
    img: "/images/avatar9.webp",
    title: "小米官方旗舰店",
    value: "9月1日",
    label: "【小米官方旗舰店】新品手机重磅来袭！",
  },
  {
    img: "/images/avatar10.jpg",
    title: "Apple Store官方旗舰店",
    value: "8月31日",
    label: "Apple/苹果iPhone 16 Pro Max 新品首发！",
  },
];
</script>

<style lang="less" scoped>
:deep(.van-cell) {
  .van-cell left-icon {
    width: 30px;
    height: 10px;
    .van-icon image {
      width: 100%;
      height: 100%;
    }
  }
  .van-cell title {
    .van-cell label {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 300px;
    }
  }
}
</style>
  